<template>
  <div style="display: flex; justify-content: center; width: 800px; height: 500px; padding: 20px" v-loading="loading">
    <div style="width: 800px">
      <el-row>
        <el-col :span="4">
          <div class="text-center">已上传文件</div>
          <div>
            <div v-if="filetype === '图片'" style="width: 120px; height: 460px; overflow: scroll">
              <div class="himg relative" v-for="(item, index) in historylist" :key="index">
                <el-image
                  :src="item.fileUrl"
                  class="mt-1"
                  fit="cover"
                  lazy
                  style="width: 100px; height: 100px; margin-left: 10px"
                  @click="uppopupsave(item)"
                />
                <div class="absolute top-0 right-0">
                  <el-icon
                    @click="
                      dialogVisible = true;
                      dialogImageUrl = item.fileUrl;
                    "
                    ><Search
                  /></el-icon>
                </div>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="20">
          <div
            class="p-4 bg-white text-center"
            v-if="filetype === '图片'"
            style="position: relative; width: 600px; height: 460px; overflow-y: scroll"
          >
            <div class="absolute right-2 top-0" style="z-index: 99">
              <el-select v-model="value" placeholder="Select" size="large" style="width: 240px" @change="selectChanged">
                <el-option label="平铺" value="平铺" />
                <el-option label="滚动" value="滚动" />
              </el-select>
            </div>
            <div class="mt-8">
              <div
                class="border p-4 mr-2 float-left mb-2 relative"
                style="width: 120px; height: 120px"
                v-for="(o, i) in fileList"
                :key="i"
              >
                <el-image
                  :src="o.value"
                  class="w-full h-full"
                  fit="cover"
                  lazy
                  @click="
                    dialogVisible = true;
                    dialogImageUrl = o.value;
                  "
                />
                <div class="absolute top-0 right-0 cursor-pointer" @click="removeImg(i)">
                  <el-icon color="#BD3124"><CircleClose /></el-icon>
                </div>
              </div>
              <div class="border p-4 mr-2 float-left mb-2" style="width: 120px; height: 120px">
                <el-upload
                  action="#"
                  :http-request="UploadOss"
                  list-type="text"
                  :auto-upload="true"
                  :accept="accept"
                  :show-file-list="false"
                  :on-progress="uploadVideoProcess"
                >
                  <div>
                    <svg
                      t="1730476980227"
                      class="icon"
                      viewBox="0 0 1024 1024"
                      version="1.1"
                      xmlns="http://www.w3.org/2000/svg"
                      p-id="4582"
                      width="56"
                      height="56"
                      v-if="!isuplaod"
                      style="margin: 0 auto"
                    >
                      <path d="M0 0h1024v1024H0V0z" fill="#202425" opacity=".01" p-id="4583"></path>
                      <path
                        d="M955.733333 238.933333a170.666667 170.666667 0 1 0-341.333333 0 170.666667 170.666667 0 0 0 341.333333 0zM448.7168 290.816a34.133333 34.133333 0 0 0-59.255467 0L38.673067 904.635733A34.133333 34.133333 0 0 0 68.3008 955.733333h701.576533a34.133333 34.133333 0 0 0 29.627734-51.063466L448.750933 290.781867z"
                        fill="#11AA66"
                        p-id="4584"
                      ></path>
                      <path
                        d="M721.3056 529.749333a34.133333 34.133333 0 0 1 59.255467 0l214.254933 374.920534A34.133333 34.133333 0 0 1 965.188267 955.733333H536.6784a34.133333 34.133333 0 0 1-29.627733-51.063466l214.254933-374.954667z"
                        fill="#FFAA44"
                        p-id="4585"
                      ></path>
                    </svg>
                    <div v-if="!isuplaod" class="mt-2">请上传图片</div>
                    <svg
                      t="1730823551715"
                      class="icon"
                      viewBox="0 0 1024 1024"
                      version="1.1"
                      xmlns="http://www.w3.org/2000/svg"
                      p-id="2377"
                      width="56"
                      height="56"
                      style="margin: 0 auto"
                      v-if="isuplaod"
                    >
                      <path
                        d="M876.864 782.592c3.264 0 6.272-3.2 6.272-6.656 0-3.456-3.008-6.592-6.272-6.592-3.264 0-6.272 3.2-6.272 6.592 0 3.456 3.008 6.656 6.272 6.656z m-140.544 153.344c2.304 2.432 5.568 3.84 8.768 3.84a12.16 12.16 0 0 0 8.832-3.84 13.76 13.76 0 0 0 0-18.56 12.224 12.224 0 0 0-8.832-3.84 12.16 12.16 0 0 0-8.768 3.84 13.696 13.696 0 0 0 0 18.56zM552.32 1018.24c3.456 3.648 8.32 5.76 13.184 5.76a18.368 18.368 0 0 0 13.184-5.76 20.608 20.608 0 0 0 0-27.968 18.368 18.368 0 0 0-13.184-5.824 18.368 18.368 0 0 0-13.184 5.76 20.608 20.608 0 0 0 0 28.032z m-198.336-5.76c4.608 4.8 11.072 7.68 17.6 7.68a24.448 24.448 0 0 0 17.536-7.68 27.456 27.456 0 0 0 0-37.248 24.448 24.448 0 0 0-17.536-7.68 24.448 24.448 0 0 0-17.6 7.68 27.52 27.52 0 0 0 0 37.184z m-175.68-91.84c5.76 6.08 13.824 9.6 21.952 9.6a30.592 30.592 0 0 0 22.016-9.6 34.368 34.368 0 0 0 0-46.592 30.592 30.592 0 0 0-22.016-9.6 30.592 30.592 0 0 0-21.952 9.6 34.368 34.368 0 0 0 0 46.592z m-121.152-159.36c6.912 7.36 16.64 11.648 26.368 11.648a36.736 36.736 0 0 0 26.432-11.584 41.28 41.28 0 0 0 0-55.936 36.736 36.736 0 0 0-26.432-11.584 36.8 36.8 0 0 0-26.368 11.52 41.28 41.28 0 0 0 0 56zM12.736 564.672a42.88 42.88 0 0 0 30.784 13.44 42.88 42.88 0 0 0 30.784-13.44 48.128 48.128 0 0 0 0-65.216 42.88 42.88 0 0 0-30.72-13.44 42.88 42.88 0 0 0-30.848 13.44 48.128 48.128 0 0 0 0 65.216z m39.808-195.392a48.96 48.96 0 0 0 35.2 15.36 48.96 48.96 0 0 0 35.2-15.36 54.976 54.976 0 0 0 0-74.56 48.96 48.96 0 0 0-35.2-15.424 48.96 48.96 0 0 0-35.2 15.424 54.976 54.976 0 0 0 0 74.56zM168.32 212.48c10.368 11.008 24.96 17.408 39.68 17.408 14.592 0 29.184-6.4 39.552-17.408a61.888 61.888 0 0 0 0-83.84 55.104 55.104 0 0 0-39.616-17.408c-14.656 0-29.248 6.4-39.616 17.408a61.888 61.888 0 0 0 0 83.84zM337.344 124.8c11.52 12.16 27.712 19.264 43.968 19.264 16.256 0 32.448-7.04 43.968-19.264a68.672 68.672 0 0 0 0-93.184 61.248 61.248 0 0 0-43.968-19.264 61.248 61.248 0 0 0-43.968 19.264 68.736 68.736 0 0 0 0 93.184z m189.632-1.088c12.672 13.44 30.528 21.248 48.448 21.248s35.712-7.808 48.384-21.248a75.584 75.584 0 0 0 0-102.464A67.392 67.392 0 0 0 575.36 0c-17.92 0-35.776 7.808-48.448 21.248a75.584 75.584 0 0 0 0 102.464z m173.824 86.592c13.824 14.592 33.28 23.104 52.736 23.104 19.584 0 39.04-8.512 52.8-23.104a82.432 82.432 0 0 0 0-111.744 73.472 73.472 0 0 0-52.8-23.168c-19.52 0-38.912 8.512-52.736 23.168a82.432 82.432 0 0 0 0 111.744z m124.032 158.528c14.976 15.872 36.032 25.088 57.216 25.088 21.12 0 42.24-9.216 57.152-25.088a89.344 89.344 0 0 0 0-121.088 79.616 79.616 0 0 0-57.152-25.088c-21.184 0-42.24 9.216-57.216 25.088a89.344 89.344 0 0 0 0 121.088z m50.432 204.032c16.128 17.088 38.784 27.008 61.632 27.008 22.784 0 45.44-9.92 61.568-27.008a96.256 96.256 0 0 0 0-130.432 85.76 85.76 0 0 0-61.568-27.072c-22.848 0-45.44 9.984-61.632 27.072a96.192 96.192 0 0 0 0 130.432z"
                        fill="#262626"
                        p-id="2378"
                      ></path>
                    </svg>
                    <div v-if="isuplaod" class="mt-2">上传中</div>
                  </div>
                </el-upload>
              </div>
            </div>
          </div></el-col
        >
      </el-row>
    </div>
  </div>
  <div class="w-full text-right">
    <el-button type="primary" @click="qd()">确定</el-button>
  </div>
  <el-dialog v-model="dialogVisible">
    <img w-full :src="dialogImageUrl" alt="Preview Image" />
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive, toRefs, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import { i52_uploadedfile_list, uploadfile_saveone } from '@/api/index.js';
import { fileput, formatBytes } from '@/utils/ali-oss';
import moment from 'moment';
import { func } from 'node_modules/@climblee/uv-ui/libs/function/test';
import { ElMessage } from 'element-plus';
import { defineEmits } from 'vue';
const emit = defineEmits(['updateMessage']);
const props = defineProps({
  filetype: String,
});
const showToast = inject('showToast');
const value = ref('平铺');
const isuplaod = ref(false);
const accept = ref('');
if (props.filetype == '图片') {
  accept.value = '.png, .jpeg,.gif, .bmp, .webp';
} else if (props.filetype == '音视频') {
  accept.value = '.mp4,.avi,.mov,.wav,.aac,.m4a,.mp3,.wav,.aac';
} else if (props.filetype == '音频') {
  accept.value = '.mp3,.wav,.aac,.m4a';
} else if (props.filetype == '文件') {
  accept.value = '.doc,.xlsx,.xls,.docx,.ppt,.pptx,.pdf';
}
const fileList = ref([]);
function removeImg(i) {
  console.log('i:', i);
  fileList.value.splice(i, 1);
  ElMessage({
    message: '删除成功',
    type: 'error',
  });
}
function UploadOss(option) {
  isuplaod.value = true;
  console.log(option);
  let objName = option.file.name;
  let fileName = moment().format('YYYY/MM/DD');
  //this.uploadLoading = true
  fileput(`pc/${fileName}/${objName}`, option.file)
    .then((res) => {
      console.log(res);
      if (res.res.statusCode === 200) {
        console.log('上传成功', res);
        isuplaod.value = false;
        console.log('option.file', option.file);
        console.log('value.value :', value.value);
        if (props.filetype == '图片') {
          uploadfile_saveone(0, res.url, option.file.size, 0).then((f) => {
            let d = {
              key: '图片',
              value: res.url,
              name: option.file.name,
              fileId: f.data.data.uploadfileinfo.fileId,
              size: formatBytes(option.file.size),
              grid: 'w-full',
              mode: 'aspectFit',
              uid: option.file.uid,
              download: ['允许下载'],
            };
            console.log('d:', d);
            // list.value.push(d);
            fileList.value.push(d);
            uploadedfile_list();
            console.log('fileList:', fileList.value);
          });
        }
        console.log('list:', list.value);
      } else {
        console.log('上传失败');
      }
    })
    .catch((err) => {
      //showToast('上传文件异常:' + err, 'error');
    });
}
function uppopupsave(file) {
  if (file.fileSize <= JSON.parse(localStorage.getItem('vipinfo')).limit2Imgtxtone) {
    let d = {
      key: '图片',
      value: file.fileUrl,

      fileId: file.fileId,
      download: ['允许下载'],
      grid: 'w-full',
      mode: 'aspectFit',
    };
    console.log('d:', d);
    // list.value.push(d);
    fileList.value.push(d);
  }
}
function uploadVideoProcess(event, file, fileList) {
  console.log('event:', event);
  // progressFlag.value = true; // 显示进度条
  // loadProgress.value = parseInt(event.percent); // 动态获取文件上传进度
  // console.log('loadProgress.value:', loadProgress.value);
  // if (loadProgress.value >= 100) {
  //   loadProgress.value = 100;
  //   setTimeout(() => {
  //     progressFlag.value = false;
  //   }, 1000); // 一秒后关闭进度条
  // }
}
const dialogVisible = ref(false);
const loading = ref(true);
loading.value = false;
function getTypeEN() {
  console.log('props.type:', props.filetype);
  if (props.filetype === '视频') {
    return 'video';
  } else if (props.filetype === '音频') {
    return 'audio';
  } else if (props.filetype === '图片' || props.filetype === '滚动') {
    return 'img';
  } else if (props.filetype === '文件' || props.filetype === '文件列表') {
    return 'doc';
  }
}
const historylist = ref([]);
const historyimglist = ref([]);
function uploadedfile_list() {
  i52_uploadedfile_list().then((res) => {
    console.log('getTypeEN():', getTypeEN());

    historylist.value = res.data.data.listdata
      .filter((x) => x.fileType === getTypeEN())
      .sort((a, b) => {
        // 将字符串日期转换为日期对象
        const dateA = new Date(a.CreateDate);
        const dateB = new Date(b.CreateDate);

        // 比较日期并返回比较结果
        return dateB - dateA; // 倒序
      })
      .slice(0, 50);
    if (props.filetype === '图片') {
      historyimglist.value = historylist.value.map((item) => {
        return item.fileUrl;
      });
    }
    console.log(':', historylist.value);
  });
}
uploadedfile_list();
function qd() {
  if (props.filetype === '图片') {
    var f = { type: value.value, fileList: fileList.value };
    emit('updateMessage', f);
  }
}
onMounted(() => {});
</script>
<style scoped lang="less">
.himg:hover {
  border: 1px solid rgba(250, 210, 0, 1);
  color: rgba(250, 210, 0, 1);
}
</style>

